<template>
  <div id="applyInvoiceDetail" style="position: relative;">
    <a-spin :spinning="spinning">
      <div class="form-btn">
        <!-- 如果是撤回和审核驳回，必须点击重新编辑才可以保存和重新提交 -->
        <a-button class="btn" type="primary" v-if="alias === 'edit' && ['dtj'].includes(billstatus) || (['chehui', 'no'].includes(billstatus) && isEdit)" @click="handleSubmit(1)">保存</a-button>
        <a-button class="btn" type="primary" v-if="alias === 'edit' && ['dtj'].includes(billstatus)" @click="handleSubmit(2)">提交</a-button>
        <a-button class="btn" type="primary" v-if="alias === 'edit' && isEdit" @click="handleSubmit(2)">重新提交</a-button>
        <a-button class="btn" type="primary" v-if="alias === 'aduit' && ['dsh'].includes(billstatus)" @click="visible = true">审核</a-button>
        <!-- <a-button class="btn" type="primary" v-if="alias !== 'aduit' && ['dsh'].includes(billstatus)" @click="handleCancel(form)">撤回</a-button> -->
        <a-button class="btn" type="primary" v-if="alias === 'edit' && ['chehui', 'no'].includes(billstatus) && !isEdit" @click="isEdit = true">重新编辑</a-button>
        <!-- <a-button class="btn" type="primary" v-if="['ok'].includes(billstatus)" @click="handlePush(form)">推送NC</a-button> -->
        <a-button class="btn" type="primary" @click="visiblePrinting = true" v-if="['ok','dsh'].includes(billstatus)">打印</a-button>
        <!--  -->
      </div>
      <div class="wrap">
        <div id="printJS-form">
          <!--   基础信息   -->
          <div class="printJS-item">
            <a-form-model ref="form" :model="form" :label-col="{span: 8}" :wrapper-col="{span: 14}" >
              <div class="infoTitle">基础信息</div>
              <div class="form-row">
                <a-form-model-item label="单据编码" class="form-col">
                  <a-input
                    v-model="form.billcode"
                    placeholder="请输入单据编码"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="单据状态" class="form-col">
                  <a-input
                    v-model="form.billStatusName"
                    placeholder="请输入单据状态"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="单据日期" class="form-col">
                  <a-input
                    v-model="form.billdate"
                    placeholder="请输入单据日期"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="组织名称" class="form-col" prop="deliveryPeople">
                  <a-input
                    v-model="form.orgName"
                    placeholder="请输入组织名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="分公司名称" class="form-col">
                  <a-input
                    v-model="form.complanyName"
                    placeholder="请输入分公司名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="项目名称" class="form-col">
                  <a-input
                    v-model="form.projectName"
                    placeholder=""
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="申请人" class="form-col">
                  <a-input
                    v-model="form.registerName"
                    placeholder="请输入审批意见"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="申请人部门" class="form-col">
                  <a-input
                    v-model="form.deptName"
                    placeholder="请输入审批时间"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="放行日期" class="form-col">
                  <a-input
                    v-model="form.passDate"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="外出门岗" class="form-col">
                  <a-input
                    v-model="form.passDoor"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="外出原因" class="form-col">
                  <a-input
                    v-model="form.passMeno"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="车辆是否有牌" class="form-col">
                  <a-select
                v-model="form.hasCardnum"
                :showSearch="true"
                allowClear
                disabled
                placeholder="请选择状态">
                <a-select-option
                  :value="0"
                  >{{"有"}}
                </a-select-option>
                <a-select-option
                  :value="1"
                  >{{"没有"}}
                </a-select-option>
                </a-select>
                </a-form-model-item>
                <a-form-model-item label="车牌号码" class="form-col">
                  <a-input
                    v-model="form.carNumber"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="司机姓名" class="form-col">
                  <a-input
                    v-model="form.driverName"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="电话" class="form-col">
                  <a-input
                    v-model="form.telephone"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="驾驶证号" class="form-col">
                  <a-input
                    v-model="form.driverLicense"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="行驶证上总重量(KG)" class="form-col">
                  <a-input
                    v-model="form.carWeight"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="毛重(KG)" class="form-col">
                  <a-input
                    v-model="form.grossWeight"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                  </a-form-model-item>
                  <a-form-model-item label="总数量" class="form-col">
                  <a-input
                    v-model="form.totalNum"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="总金额" class="form-col">
                  <a-input
                    v-model="form.totalAmount"
                    placeholder="请输入物料名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="备注" class="form-col">
                  <a-input
                    v-model="form.memo"
                    placeholder=""
                    disabled
                  />
                </a-form-model-item>
                <a-form-model-item label="单据类型编码" class="form-col">
                  <a-input
                    v-model="form.billtype"
                    placeholder="请输入物料名称"
                    disabled
                  />
                </a-form-model-item>
              </div>
            </a-form-model>
          </div>
          <!--   申请单明细   -->
          <div class="printJS-item">
            <div class="infoTitle">申请单明细</div>
            <div class="tableWrap">
              <DataTable rowKey="phid" :showConfig="false" :tableData="Data" :tableColumn="tableColumn" />
            </div>
          </div>
          <!--   图片列表   -->
          <div class="printJS-item">
            <div class="infoTitle">图片列表</div>
            <div class="flex imgWrap">
              <a-upload
                list-type="picture-card"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange"
                disabled
                >
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancels">
              <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </div>
        </div>
      </div>

      <CommonDialog
        :rows="rows"
        :form="dialogForm"
        title="审核"
        :visible="visible"
        @hideDialog="hideVisible"
        @confirm="confirmHandle()"
      />
      <CommonDialog
        width="600px"
        :showButton="false"
        :visible="preVisible"
        @hideDialog="preVisible = false"
      >
        <template #detail>
          <img :src="previewUrl" style="width: 100%">
        </template>
      </CommonDialog>
    </a-spin>
  </div>

</template>
<script lang='ts'>
import { Confirm, Validate } from '@/decorator';
import { Component, Watch, Vue } from 'vue-property-decorator';
import print from 'print-js'

@Component
export default class applyInvoiceDetail extends Vue {
  isHttp:boolean = true
  spinning:boolean= false
  form: any = {};
  Data: any[] = [];
  pic_index:any = 0
  previewUrl:any = ''
  visiblePrinting:boolean = false
  tableListData:any[] = []
  myTableListData:any[] = []
  printTableData:any[] = []
  filedChecking:any=0
  preVisible2:boolean = false
  currentIndex:any = 0
  get tableColumn () {
    return {
      rowno: {
        label: '行号',
        width: 50
      },
      phidMaterial: {
        label: '物资编码',
        width: 120
      },
      matrialName: {
        label: '物资名称',
        width: 120
      },
      unitName: {
        label: '单位',
        width: 50
      },
      price: {
        label: '单价',
        width: 150
      },
      sgsName: {
        label: '收购商',
        width: 150
      },
      telephone: {
        label: '电话号码',
        width: 170
      },
      num: {
        label: '数量',
        width: 150
      },
      amount: {
        label: '金额',
        width: 150
      },
      memo: {
        label: '备注',
        width: 150
      }
    }
  }
  get printTableColumn () {
    return {
      materialsName: {
        label: '物料名称',
        width: 150
      },
      vdef1: {
        label: '存货备注',
        width: 150
      },
      unit: {
        label: '单位',
        width: 140
      },
      storageNumber: {
        label: '可入库数量',
        width: 150
      },
      sendOutNum: {
        label: '发货数量',
        width: 140
      },
      checkNum: {
        label: '实收数量',
        width: 150
      },
      checkQualityTitle: {
        label: '质量等级',
        width: 150
      }
      // checkMemo: {
      //   label: '抽查描述',
      //   width: 150
      // }
    }
  }
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  visible: boolean = false // 审核弹窗

  // dialog
  dialogForm: any = {
    checkStatus: 1,
    checkRemark: ''
  }
  get rows () {
    return {
      billstatus: {
        label: '审核状态',
        el: 'radio',
        option: [
          {
            label: '同意',
            value: true
          },
          {
            label: '驳回',
            value: false
          }
        ],
        rules: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ]
      },
      memo: {
        el: 'textarea',
        label: '备注',
        placeholder: '请输入备注',
        rules: [
          { validator: this.remarkVali, trigger: 'blur' }
        ]
      }
    }
  }
  reCheckStepList: any[] = []
  reRen: any[] = []
  ysList: any[] = []
  ysState: any = ''
  reList: any[] = []
  reTime: any = ''
  ysTime: any = ''
  shList: any[] = []
  reState: any = 'no'
  shState: any = 'no'
  shTime: any = ''
  shRemarks: any = ''
  id: string = ''
  tableType: string = 'add'
  activeIndex: number = 0 // 当前编辑的行
  preVisible: boolean = false
  defaultList: any[] = []
  onSitetList: any[] = []
  checkFileFour: any[] = []
  poundList: any[] = []
  alias: string = '' // 当前页面状态
  billstatus: string = '0'
  isEdit: boolean = false // 重新编辑
  approveData: any[] = [] // 审核信息
  fileList: any[] = [] // 图片信息
  previewVisible: Boolean = false
  previewImage: any = ''
  // 是否可编辑
  get isInput () {
    return (['edit'].includes(this.alias) && ['0', '1'].includes(this.billstatus)) || this.isEdit
  }
  init () {
    const {_alias: alias, phid: id} = this.$route.query
    this.id = id as string
    this.alias = alias as string
    this.getDetail()
  }
  // 预览图片处理
  getBase64 (file: any) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
// 关闭预览
  handleCancels () {
    this.previewVisible = false
  }

  // 打开预览
  async handlePreview (file: any) {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    }
    // 切换预览
    handleChange ({ fileList }: any) {
      this.fileList = fileList;
    }

  getDetail () {
    this.$api.passDetailFetch({phid: this.id}).then(({ data }: any) => {
      // this.getReCheckStep(data.phid)
      this.billstatus = data.billstatus

      data.approverName = data.approverName ? data.approverName.split(',') : ''
      this.form = data.passHeadVO // 基础信息
      this.form.hasCardnum = Number(this.form.hasCardnum)
      data.fileStoreList.map((item: any) => {
        item.uid = item.fileId;
        item.name = 'image.png';
      })
      this.fileList = data.fileStoreList // 图片信息
      this.Data = data.passDetailVOList // 申请单明细
      this.filedChecking = data.filedChecking
      this.printTableData = data.passDetailVOList
      // 审核信息
      let approveInfo = this.$enums.acceptanceList.approveInfo
      this.approveData = Object.keys(approveInfo).map((key: any) => ({label: approveInfo[key], value: (this.$enums.acceptanceList[key] || {})[data[key]] || data[key]}))
    })
  }
  // dialog确定
  confirmHandle () {
    let that = this
    let checkStatus = 1
    if (this.dialogForm.checkStatus) {
      checkStatus = 1
    } else {
      checkStatus = 0
    }
    const data = {
      checkStatus: checkStatus,
      checkRemark: this.dialogForm.checkRemark,
      id: this.id
    }
    this.spinning = true
    this.visible = false
    // this.isHttp = false
    // const hide = this.$message.loading('审核中...', 2);
    this.$api.checkAuditStatusFetch(data).then(() => {
      // this.$message.success('审核成功')
      // this.$message.loading('审核成功', 1)
      this.spinning = false
      this.$message.success('审核成功')
      setTimeout(() => {
        // that.isHttp = true
        that.$router.back()
      }, 1000)
    }).catch(() => {
      // that.isHttp = true
      this.spinning = false
    })
  }
  // 隐藏dialog
  hideVisible () {
    this.visible = false
  }
  changePage (val: number) {
    this.pageConfig.current = val;
  }
  handlePrint () {
    const style = `@page { margin: 20px; } .flex {display: flex} @media print{}
        .printModalWrap{
          width: 100%;
          min-height: 500px;
          border: 1px solid #8a8a8a;
        }
        .print-title{
            line-height: 44px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            border-bottom: 1px solid #8a8a8a;
        }
        .print-middle{
          padding: 10px 15px;
          display: flex;
          border-bottom: 1px solid #8a8a8a;
        }
        .middle-left{
          width: calc(100% - 180px);
          display: flex;
          flex-wrap: wrap;
          font-size:8px;
        }
        .middle-left>div:nth-child(2n+1){
          width:55%;
        }
        .middle-left>div:nth-child(2n){
          width:45%;
        }
        .paperInvoice{
          display:flex;
        }
        .paper-label{
            font-size: 14px;
        }
        .paperInvoice>img{
          width: 150px;
          height: 150px;
        }
        .middle-left-item{
          line-height: 26px;
          padding-right: 10px;
        }
        .middle-right{
          width: 180px;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
        .logo-img{
          width: 70px;
        }
        .print-table{
          padding: 10px 15px;
        }
        .print-table-bottom{
          line-height: 40px;
          display: flex;
          justify-content: space-between;
        }
        .table-bottom-left{
          display: flex;
        }
        .table-bottom-right{
          padding-right: 50px;
          display: flex;
        }
        .table-bottom-right>div{
          margin-left: 50px;
        }
      .form-row {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 200px;
      }
      .form-col {
        width: 48%;
        flex-shrink: 0;
      }
      .form-btn {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .btn {
        margin: 10px 10px 0 0;
      }
      .ant-input-number, .ant-calendar-picker {
        width: 100%;
      }
      .ant-pagination {
        display: none
      }
    .infoTitle {
      margin-bottom: 20px;
      font-weight: 800;
      color: #000;
    }
    .ant-input[disabled] {
      color: #000;
    }
    `
    print({
      printable: 'printModalWrap',
      type: 'html',
      documentTitle: '',
      css: ['https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.css', ''],
      style: style,
      scanStyles: false
    })
  }
  remarkVali (rule: any, value: string, callback: any) {
    if (!this.dialogForm.checkStatus && !value.trim().length) {
      return callback(new Error('请填写驳回原因'))
    }
    callback()
  }
}
</script>
<style lang='scss' scoped>
.form-btn {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  z-index:999999;
  .btn {
    margin: 10px 10px 0 0;
  }
}
.wrap{
  // margin: 0 20px;
  min-width: 960px;
  min-height: calc(100vh - 203px);
  padding: 0 25px;
  #printJS-form{
    .printJS-item{
      background: #fff;
      margin-bottom: 20px;
      border-radius: 8px;
      .yszf_wrap{
        padding:30px 24px;
        display: flex;
        flex-wrap: wrap;
        div{
          margin-bottom: 10px;
        }
      }
      .stepWrap{
        padding:30px 24px;
        display: flex;
        .step-left{
          width: 58%;
          padding-right: 40px;
        }
        .step-right{
          border-left: 1px solid #ccc;
          padding: 4px 26px;
          color: rgba(0, 0, 0, 0.45);
          font-size:14px;
        }
      }
      .infoTitle{
        padding:24px;
        border-bottom: 1px solid #D8D8D8;
        font-size: 16px;
        color:#333333;
        font-weight: bold;
        position: relative;
        &::after{
          content: '';
          width: 4px;
          height: 20px;
          background: #437DFC;
          position:absolute;
          top:50%;
          left: 0;
          margin-top: -10px;
          border-radius: 6px;
        }
      }
      .form-row{
        padding: 24px 24px 14px;
        display: flex;
        flex-wrap: wrap;
        .form-col {
          width: 33%;
          flex-shrink: 0;
        }
      }
      /deep/ .ant-form-item{
        margin-bottom: 10px;
      }
      .tableWrap{
        padding:30px 24px
      }
      .table-wrap{
        width: 1000px;
        display:flex;
        flex-wrap: wrap;
        // margin-bottom: 20px;
        padding: 30px 24px;
        .table-item{
          width:33.33%;
          display: flex;
          align-items: center;
          line-height: 50px;
          border: 1px solid #d9d9d9;
          .item-label{
            padding: 0 8px;
            width: 122px;
            border-right: 1px solid #d9d9d9;
            background: rgb(244, 244, 244);
            font-weight: bold;
            text-align: center;
          }
          .item-right{
            padding: 0 8px;
            width: calc(100% - 122px);
          }
        }
      }
      .imgWrap{
        padding:24px 24px;
        div{
          margin:0 20px 20px 0;
          .label{
            font-size: 14px;
            color: #000000;
          }
          .img-item{
            width:220px;
            height: 220px;
            margin: 10px 10px 10px 0;
          }
        }
      }
      .ysccWrap{
        padding:24px;
        .ysqk-item{
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          .label{
            color: #000000;
            font-size: 14px;
          }
          .ysqk-text{
            width: 1148px;
            height: 104px;
            margin-top: 10px;
            padding: 14px 20px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.15);
            font-size: 14px;
            color: #000;
          }
        }
        .ysqk-img{
          display: flex;
          .ysqk-img-l{
            display: flex;
            flex-direction: column;
            div{
              display:flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
          .ysqk-img-r{
            display: flex;
            flex-direction: column;
            div{
              display: flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
        }
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
      .pic-wrap{
        padding:15px 24px 40px;
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
    }
    /deep/ .ant-select-selection-selected-value, .ant-input[disabled]{
      color: rgba(0, 0, 0, 0.8);
    }
    /deep/ .ant-input-number-input{
      color: rgba(0, 0, 0, 0.8) ;
    }
  }
}
.printModalWrap{
  width: 100%;
  margin-bottom: 20px;
  // min-height: 500px;
  border: 1px solid #8a8a8a;
  .print-title{
    line-height: 44px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #8a8a8a;
  }
  .print-middle{
    padding: 10px 15px;
    display: flex;
    border-bottom: 1px solid #8a8a8a;
    .middle-left{
      width: calc(100% - 250px);
      display: flex;
      flex-wrap: wrap;
      .middle-left-item{
        width: 30%;
        line-height: 26px;
        padding-right: 10px;
      }
    }
    .middle-right{
      width: 250px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .logo-img{
        width: 80px;
      }
    }
  }
  .print-table{
    padding: 10px 15px;
    .print-table-bottom{
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      .table-bottom-left{
        display: flex;
      }
      .table-bottom-right{
        padding-right: 50px;
        display: flex;
        div{
          margin-left: 50px;
        }
      }
    }
    .paperInvoice{
      display:flex;
      flex-wrap: wrap;
      .paper-label{
        font-size: 14px;
      }
      img{
        width: 150px;
        height: 150px;
        margin-right: 10px;
      }
    }
  }
}
.print-bottom{
  display: flex;
  justify-content: center;
}
.pic-wrap{
  display: flex;
  flex-wrap: wrap;
}
// .form-row {
//   display: flex;
//   flex-wrap: wrap;
//   .form-col {
//     width: 50%;
//     flex-shrink: 0;
//   }
// }
// .form-btn {
//   width: 100%;
//   display: flex;
//   justify-content: center;
//   .btn {
//     margin: 10px 10px 0 0;
//   }
// }
// .img-item {
//   width: 100px;
//   height: 100px;
//   margin: 0px 10px 10px 0;
// }
// .table-wrap{
//   border: 1px solid #d9d9d9;
//   width: 1000px;
//   display:flex;
//   flex-wrap: wrap;
//   margin-bottom: 20px;

//   .table-item{
//     width:50%;
//     display: flex;
//     align-items: center;
//     line-height: 50px;
//     border: 1px solid #d9d9d9;
//     .item-label{
//       padding: 0 8px;
//       width: 180px;
//       border-right: 1px solid #d9d9d9;
//       background: rgb(244, 244, 244);
//     }
//     .item-right{
//       padding: 0 8px;
//       width: calc(100% - 180px);
//     }
//   }
// }
.dif{
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}
/deep/ .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-description {
  max-width: 300px !important;
  white-space: normal;
}
.dialog_bottom{
  cursor: pointer;
  margin-top: 10px;
  width:100%;
  height:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  div{
    display: flex;
    justify-content: center;
    align-items: center;

    .dialog_pic{
      width:48px;
      height:48px;
      margin-right: 10px;
    }
  }

}
</style>
